<template>
    <!-- 用户资料 -->
    <el-drawer
      :before-close="handleClose"
      v-model="formData.visible"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="26%"
      >
      <div class="demo-drawer__content profile">
        <el-form ref="form" :model="form" label-width="100px">
         <FormsItems v-for="item in formData.forms" :key="item.Label" :formItem="item" :data="data" :Checked="Checked" />
         <el-form-item label="用户角色">
            <el-input placeholder="不可编辑修改" v-model="data['Role'].Name" :disabled="true"></el-input>
         </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="formData.visible = false">取 消</el-button>
          <el-button type="primary" @click="ProfileDrawerOk" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
</template>
<script>
import { computed } from 'vue'
import FormsItems from '../../components/basic/form-item';
export default {
  name:"UserProfile",
  components: {
    FormsItems
  },
  props: {
    formData:{
      type: Object,
      default: () => {}
    },
    formTitle:{
      type:String,
      default:""
    },
    data:{
      type:Object,
      default:() => {}
    },
    Checked: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit, attrs }) {
    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    function ProfileDrawerOk(){
      emit('userProfileConfirm');
    }
    function handleCancel() {
      props.formData.visible = false
      // emit('close');
    }

    return {
      visibleDialog,
      ProfileDrawerOk,
      handleCancel
    };
  }
}
</script>
<style scoped>
.el-drawer__header{
  margin-bottom: 0 !important;

}
.profile{
  padding:20px;
  height: 100vh;
}
</style>
